<template>
  <div class="logs">
    <!-- 卡片视图 -->
    <el-card>
      <!-- 带图标的提示 -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <i class="el-alert__icon el-icon-info"></i>
            <!-- {{ this.total }} -->
            <span class="size">共10条数据</span>
          </div>
        </el-col>
        <!-- 用户列表区域 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="operation" label="操作类型" width="200"> </el-table-column>
          <el-table-column prop="name" label="操作人" width="180"> </el-table-column>
          <el-table-column prop="enforcement" label="执行结果" width="600"></el-table-column>
          <el-table-column prop="data" label="操作时间" width="270"> </el-table-column>
          <el-table-column prop="describe" label="描述" width="228"> </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[1, 2, 5, 10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="10">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Logs',
  components: {},
  props: {},
  data() {
    return {
      // 表单数据
      tableData: [
        {
          operation: 'US',
          name: '郭勇',
          enforcement: '张展热身战应现交连动设论料没社报联群革打性把队观律。',
          data: '2011-10-26 22:12:54',
          describe: '36.77'
        },
        {
          operation: 'JP',
          name: '万平',
          enforcement: '走头美是平义克科质亲重何该委选眼象什几同界交县该经习际并活。',
          data: '1977-08-15 08:21:28',
          describe: '100.32'
        },
        {
          operation: 'EU',
          name: '陆超',
          enforcement: '确把路易法府法两写层反力接任才流学文写华空律达按标也之关新计重前状西委状员书么向好。',
          data: '2008-06-27 12:03:47',
          describe: '40.59'
        },
        {
          operation: 'CN',
          name: '秦芳',
          enforcement: '正段话原号给治军素拉走示包主老标大。',
          data: '1977-07-17 22:22:57',
          describe: '22.51'
        },
        {
          operation: 'JP',
          name: '郑超',
          enforcement: '我斯究数反议价题史它律道养算酸参包有比法三名求支火如石己争千群温。',
          data: '1974-06-13 06:58:42',
          describe: '35.62'
        },
        {
          operation: 'US',
          name: '常磊',
          enforcement: '华主细天为好新石必们米于观族率片此教众各江边行月确头己眼口。',
          data: '1992-08-07 04:04:33',
          describe: '95.14'
        },
        {
          operation: 'JP',
          name: '谭桂英',
          enforcement: '场便要热场毛或争线今连时影成斗土今族候同第查周步信数京西重位价布通及正回解毛统更无系值。',
          data: '2003-05-23 00:04:45',
          describe: '39.77'
        },
        {
          operation: 'US',
          name: '易超',
          enforcement: '水青重去高格义她张电资高不自很米离听技看老基周。',
          data: '2003-09-02 03:53:34',
          describe: '93.64'
        },
        {
          operation: 'EU',
          name: '谢平',
          enforcement: '半平白往关长此维类两低则影成确照响置见石东解为际系体好运别复革东保月复并声战应统角利。',
          data: '2002-10-25 17:08:00',
          describe: '6.97'
        },
        {
          operation: 'US',
          name: '姜芳',
          enforcement: '列同程存化据料路老果难京因身见么有业重情还须真儿。',
          data: '1981-07-22 15:55:04',
          describe: '17.64'
        }
      ],
      // 具体页码
      queryInfo: {
        // query: '',
        // pages: 10, // 总页数
        pagesize: 10, // 页大小
        page: 1, // 当前页码
        keyword: ''
        // disabled: 1
      }
    }
  },
  computed: {},
  watch: {
    // 方法一 : name function () {}
    // 方法二 : name { 1. handler () {} 此方法可加 2. immediate = true 该回调开始立刻调用 方法一没有}
  },
  created() {},
  mounted() {},
  methods: {
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      console.log(newSize)
      this.getUserList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      console.log(newPage)
      this.getUserList()
    }
  }
}
</script>

<style>
.bg-purple-dark {
  background: #f4f4f5;
}
.grid-content {
  margin-top: 5px;
  border-radius: 4px;
  min-height: 36px;
}
.el-icon-info {
  color: #aaa;
  padding-left: 15px;
  padding-top: 10px;
}
.size {
  font-size: 12px;
  padding-left: 15px;
}
.el-table {
  margin-top: 20px;
  font-size: 12px;
}
.paging {
  margin-top: 20px;
}
</style>
